<script lang="ts" setup>
//特色图片
import { Download } from "@element-plus/icons-vue";
import { ref, computed } from "vue";
import { IndexShowData } from "@/api/interface";
import Image from "@/components/Black/Image.vue";
import { ElNotification } from "element-plus";

export interface Props {
  image: IndexShowData["image"];
}

//接收数据
const props = defineProps<Props>();

//获取图片的宽和高的比例，宽除高
const result = ref();
const imgWidth = ref();
//设计一个算法，不同的图片尺寸使用不同的展示形式
//获取图片的长和宽，算出比例，大于一定比例的为宽图
//图片宽度超过1600使用宽屏
//给默认值
const imgData = props.image ? props.image.details : { width: 1, height: 1 };
result.value = imgData.width / imgData.height;
imgWidth.value = imgData.width;

//计算属性，调整图片样式
const imgSwitch = computed(() => {
  return result.value > 1.5 && imgWidth.value > 1599
    ? "image-wide"
    : "image-inline";
});

//图片配置
const configImg = {
  small: "medium_large", //
  medium: "medium_large", //
  large: "full", //
};

const open2 = () => {
  ElNotification({
    title: "开发中",
    message: "功能开发中，敬请期待",
    type: "warning",
    offset: 150,
  });
};
</script>

<template>
  <figure class="component" :class="imgSwitch" v-if="image">
    <div class="component-content">
      <div class="image-sharesheet">
        <Image :data="image" :config="configImg"></Image>
      </div>
      <div class="image-description">
        <div class="image-caption" v-html="image.caption"></div>

        <el-link :underline="false" @click="open2">
          <el-icon class="el-icon--right white_icon"><Download /></el-icon>
        </el-link>
      </div>
    </div>
  </figure>
  <div v-else>
    <el-skeleton animated :throttle="500">
      <template #template>
        <figure class="component">
          <div class="component-content">
            <div class="image-sharesheet">
              <el-skeleton-item
                variant="image"
                style="width: 100%; height: 100%"
              />
            </div>
            <div class="image-description">
              <div class="image-caption">
                <el-skeleton-item variant="text" style="width: 50%" />
              </div>

              <el-button
                type="primary"
                size="default"
                :icon="Download"
              ></el-button>
            </div>
          </div>
        </figure>
      </template>
    </el-skeleton>
  </div>
</template>

<style lang="less" scoped>
//窄图
.image-inline {
  .component-content {
    width: 653px;
  }
}
//宽图
.image-wide {
  width: 100%;
  .component-content {
    width: 100%;
    max-width: 2560px;
  }

  .image-description {
    width: 653px;
    margin-left: auto;
    margin-right: auto;
  }
}
.image-sharesheet {
  display: flex;
  justify-content: center;
}

//图片描述
.image-description {
  button {
    line-height: 1.4211;
    font-weight: 400;
    height: 24px;
    color: #161617;
    background-color: #f5f5f7;
    border-radius: 50%;
    border: none;
    padding: 10px 5px;
  }
}

.image-description {
  margin-right: 0;
  margin-left: 0;
  .image-caption {
    flex-grow: 1;
  }
}
@media only screen and (max-width: 1068px) {
  .image-inline {
    .component-content {
      width: 576px;
    }
  }
  .image-wide {
    .image-description {
      width: 576px;
    }
  }
}
@media only screen and (max-width: 734px) {
  .image-inline {
    .component-content {
      width: 100%;
    }
    .image-description {
      margin-left: auto;
      margin-right: auto;
      width: 87.5%;
    }
  }
  .image-wide {
    .image-description {
      width: 87.5%;
    }
  }
}
</style>
